---
id: 5dfa22d1b521be39a3de7be0
title: ステップ 12
challengeType: 0
dashedName: step-12
---

# --description--

あらゆるテキストをリンクにすることができます。たとえば `p` 要素の中にあるテキストでも可能です。

``` html
<p>I think <a href="https://www.freecodecamp.org">freeCodeCamp</a> is great.</p>
```

`p` 要素内のテキストについて、`cat photos` という部分をリンクにするために、その部分の前後にアンカータグ (`a`) の開始タグと終了タグを追加してください。 次に、`href` 属性を `https://freecatphotoapp.com` に設定してください。


# --hints--

新しいアンカー (`a`) 要素を `p` 要素の中にネストする必要があります。

```js
const nestedAnchor = document.querySelector(`p > a`);
assert.isNotNull(nestedAnchor)
```

このリンクの `href` 属性の値は `https://freecatphotoapp.com` としてください。 `href` の値が設定されていないか、タイプミスがあります。

```js
assert(
  document.querySelector('p > a').href === 'https://freecatphotoapp.com/'
);
```

リンクのテキストは `cat photos` でなければなりません。 テキストに誤字脱字があります。

```js
const nestedAnchor = document.querySelector('p > a');
const innerContent = nestedAnchor.innerHTML;
assert.isTrue(innerContent.trim() === 'cat photos');
```

アンカー要素内のテキストの先頭か末尾に、余分なスペースが入っています。 アンカーテキストに含まれるスペースは `cat` と `photos` の間のスペースだけにしてください。

```js
const nestedAnchor = document.querySelector('p > a');
const innerContent = nestedAnchor.innerHTML;
assert.isNotTrue(/^\s+|\s+$/.test(innerContent));
```

アンカー (`a`) 要素をネストした後は、ブラウザーに表示される `p` 要素の中身は `See more cat photos in our gallery.` だけになるはずです。`p` 要素およびネストされたアンカー要素の、テキスト、スペース、句読点を再確認してください。

```js
assert.match(code, /<p>see more <a[^>]*>cat photos<\/a> in our gallery\.?<\/p>/i)
```

# --seed--

## --seed-contents--

```html
<html>
  <body>
    <main>
      <h1>CatPhotoApp</h1>
      <h2>Cat Photos</h2>
      <!-- TODO: Add link to cat photos -->
--fcc-editable-region--
      <p>See more cat photos in our gallery.</p>
--fcc-editable-region--
      <a href="https://freecatphotoapp.com">link to cat pictures</a>
      <img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back.">
    </main>
  </body>
</html>
```

